<template>
  <a-card class="system__module">
    <a-card title="视频测试">
      <a-flex>
        <input v-model="videoSrc" type="text" placeholder="请输入视频地址" />
        <button @click="openV">打开视频</button>
      </a-flex>
    </a-card>
    <div>
      <component :is="dynamicVue"></component>
    </div>
    <a-card title="图片">
      <a-flex :align="'top'">
        <textarea v-model="base64" placeholder="请输入base64"></textarea>
        <div>
          <button @click="imgVue">图片测试</button>
        </div>
        <a-button type="primary" @click="test">测试</a-button>
      </a-flex>
    </a-card>

    <a-card title="图片选择器">
      <div class="flex gap-4">
        <Gallery :type="imageType" v-model="gallery" />
        <div>
          <a-tag>
            {{ gallery || 'Null' }}
          </a-tag>
          <a-button @click="copyText(gallery)">复制</a-button>
        </div>
      </div>
    </a-card>
    <a-divider></a-divider>
    <FileUpload></FileUpload>
    <a-space class="w-100" direction="vertical">
      <FormDate :value-format="'HH:mm:ss'" name="date" v-model="time"></FormDate>

      <a-card title="浏览器测试">
        <div>
          <a-textarea v-model:value="link" type="text" placeholder="请输入HTML" />
          <div>
            <a-button @click="showBrowser">打开链接</a-button>
          </div>
        </div>
      </a-card>

      <!--  -->
      <a-card title="记事本测试">
        <a-flex :align="'top'">
          <textarea v-model="textarea"></textarea>
          <div>
            <button @click="showNotepad">打开记事本</button>
          </div>
        </a-flex>
      </a-card>
    </a-space>
  </a-card>
</template>

<script setup lang="ts">
import { openBrowser, openImage, openNotepad, openVideo } from '@/global/window/widget';
import type { IconType } from '@/types/system';
import { copyText } from '@/utils/common/utils';
import { saveFilePicker } from '@/utils/file/file.access';
import Gallery from '@/views/selector/gallery/Gallery.vue';
const dynamicVue = ref();

const videoSrc = ref('https://media.w3.org/2010/05/sintel/trailer.mp4');
const textarea = ref('AX后台管理');
const time = ref('2024-07-04 09:42:12');
const base64 = ref(
  ``,
);
const link = ref('https://win11.blueedge.me/');

const imageType = ref<IconType>();
const gallery = ref();
const openV = () => {
  openVideo(`http://localhost:8080/public/previewVideo?path=H:%5Ctest%5Ctest.mp4`);
};

const showNotepad = () => {
  openNotepad({
    data: textarea.value,
  });
};

const imgVue = () => {
  openImage({
    src: base64.value,
    mode: 'view',
    callback(src: string) {
      console.log('保存后的回调,获取裁剪后的图片', src);
    },
  });
};
const showBrowser = () => {
  openBrowser({
    src: link.value,
    type: 'html',
  });
};

const test = () => {
  saveFilePicker('Test', '/test/test.txt');
  // createFolderWithBrowser();
};
</script>

<style lang="scss" scoped></style>
